<template>
<div>
	<circle-steps :step="3" :steps="steps"></circle-steps>

	<div mgt3>
		<p>订单编号：{{order.orderNumber}}</p>
		<p>交易时间：{{formatTimeStr(order.info.creationTime)}}</p>
		<p>商品名称：{{order.info.subject}}</p>
		<p>交易金额：<span red>￥{{formatPrice(order.info.totalAmount)}}</span></p>
		<p>收货信息：{{order.shipInfo.address}}</p>
		<!-- <p>支付方式：{{["在线支付", "货到付款", "银行转账"][order.paymentInfo.paymentType]}}</p> -->
	</div>

	<div v-if="order.paymentInfo.paymentType==0||order.paymentInfo.paymentType==1">
		<div class="bigtitle" mgt3>
			<div class="bigtitle-title" nobd>在线支付</div>
		</div>
		<div v-if="paymentSetting.canAlipay">
			<span bd-gray3 linkable lh3 pdx2 mgr2 mgt2 @click="handleGeneratePaymentPage(0)">支付宝支付</span>
		</div>
	</div>

	<div v-if="(order.paymentInfo.paymentType==2||order.paymentInfo.paymentType==1)&&paymentSetting.canBankTransfer">
		<div class="bigtitle" mgt3>
			<div class="bigtitle-title" nobd>银行转账</div>
		</div>
		<div>
			<p gray3 mgt3>卖家账号信息：</p>
			<Alert type="warning" show-icon mgt2>
				您在向卖家账户转账时，务必填写必要信息（订单编号，商品名称），并保留转账凭证。我们会及时核对并确认您已成功付款。
				如果您已付款，请不要重复付款！
			</Alert>
			<p v-for="(item, index) in paymentSetting.bankInfos" :key="index" style="line-height:40px;max-width:600px;" bd-gray4 sz1 mgt1>
				<span pd2>{{item.bankName}}</span>
				<span pd4>账号：{{item.bankAccount}}</span>
				<span pd4>开户名：{{item.accountName}}</span>
				<Tooltip max-width="200" placement="暂无" right>
					<Icon type="ios-information-circle-outline" pd2 sz3/>
					<p slot="content">{{item.remark}}</p>
				</Tooltip>
			</p>
		</div>
	</div>

</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase';
import CircleSteps from '../../components/common/circle-steps.vue'

// 允许将html的字符串附加到某个节点后面，保证script可以正常运行
function appendHtml(elem, value){
	var temp = document.createElement("div");
	temp.innerHTML = value;
	elem.appendChild(temp);
	for(var i = 0; i < temp.children.length; i++) {
		var child = temp.children[i];
		if(child.nodeName == "SCRIPT") {
			eval(child.innerHTML);
		}
	}
}

@Component({
    components: { CircleSteps }
})
export default class Payment extends AbpBase{
	get steps():Array<string> {
		return [
			"我的购物车",
			"填写核对订单信息",
			"成功提交订单",
			"完成"
		];
	}
	order:any = {
		info: {},
		shipInfo: {}
	}
	get paymentSetting() {
		return this.$store.state.setting.settings.payment;
	}
	async handleGeneratePaymentPage(paymentMethod){
		var response = await this.post('Order/GeneratePaymentPage', { orderNumber: this.order.orderNumber, paymentMethod: paymentMethod });
		if(response.success) {
			appendHtml(document.body, response.result);
		}
	}
	async getOrder(orderNumber:string) {
		var response = await this.get('Order/Get', { orderNumber: orderNumber });
		if(response.success) {
			this.order = response.result;
		}
	}
	created() {
		var orderNumber = this.$route.params.ordernumber;
		if(orderNumber) {
			this.getOrder(orderNumber);
		}
	}
}
</script>